<template>
  <div class="recordTabs">
    <el-tabs
      type="card"
      v-model="activeName"
      class="demo-tabs"
      @tab-click="handleClick"
    >
      <el-tab-pane label="已上课记录" name="one">
        <AlreadyRecord v-if="activeName === 'one'" />
      </el-tab-pane>
      <el-tab-pane label="待上课记录" name="two">
        <WaitRecord v-if="activeName === 'two'" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import AlreadyRecord from './alreadyRecord.vue'
import WaitRecord from './waitRecord.vue'
const props = defineProps({
  active: {
    type: String,
  },
})

const activeName = ref('one')
activeName.value = props.active

const handleClick = (tab) => {
  // console.log(tab)
  activeName.value = tab.props.name
}
</script>

<style lang="scss" scoped>
.recordTabs {
}
</style>
<style lang="scss" scoped>
// :deep(.demo-tabs) {
//   .el-tabs__content {
//     overflow: visible;
//   }
// }
:deep(.el-tabs__nav-scroll) {
  .el-tabs__nav {
    .el-tabs__item {
      padding: 0 20px !important;
    }
  }
}
</style>